<template>
  <div class="goods-box">
    <!-- 未加载时loading显示区 -->
    <div class="container" v-if="loading">
      <div class="loading"></div>
    </div>
    <!-- 页面内容区 -->
    <div class="container" v-else>
      <!-- 面包屑 -->
      <XtxBread>
        <XtxBreadItem to="/">首页</XtxBreadItem>
        <XtxBreadItem :to="`/category/${list.categories[1].id}`">{{ list.categories[1].name }}</XtxBreadItem>
        <XtxBreadItem>{{ list.name }}</XtxBreadItem>
      </XtxBread>
      <!-- 商品详情展示区域 -->
      <div class="goods-wrapper">
        <div class="media">
          <!-- 图片预览 -->
          <XtxImageView :images="list.mainPictures"></XtxImageView>
          <!-- 商品统计数 -->
          <GoodsSales :goods="list"></GoodsSales>
        </div>
        <!-- 商品信息 -->
        <div class="spec">
          <GoodsInfo :goods="list"></GoodsInfo>
          <!-- spu：某个商品，sku：选完商品规格后的术语 -->
          <!-- sku组件：选完s规格之后得到skuid和其他关联信息 ，价格，库存等-->
          <XtxSku :goods="list" @change="skuData"></XtxSku>
          <!-- 数量组件 -->
          <XtxNumbox :min="1" label="数量" v-model="goodsNum"></XtxNumbox>
          <XtxButton type="primary" style="margin-top: 20px; margin-left: 60px" @click="clickCart">
            加入购物车
          </XtxButton>
        </div>
      </div>
      <!-- 商品底部展示区域 -->
      <GoodsFooter :goods="list"></GoodsFooter>
    </div>
  </div>
</template>

<script>
import { useRoute, onBeforeRouteUpdate } from 'vue-router'
import { useStore } from 'vuex'
import { onMounted, ref } from 'vue'
import { getGoodsData } from '@/api/goods.js'
import GoodsSales from './component/goods-sales.vue' // 商品统计组件
import GoodsInfo from './component/goods-info.vue' // 商品信息组件
import GoodsFooter from './component/goods-footer.vue' // 商品底部组件
import Message from 'erabbit-ui/packages/components/Message'
export default {
  name: 'Goods',
  components: { GoodsSales, GoodsInfo, GoodsFooter },
  setup() {
    // 1.渲染面包屑
    // 2.定义api函数，组件初始化获取商品详情数据
    // 3.设置loading效果
    // 4.商品id发生改变重新渲染页面
    const route = useRoute()
    const store = useStore()
    const list = ref({})
    const loading = ref(true)
    const getGoods = async id => {
      const data = await getGoodsData(id)
      list.value = data.result
      loading.value = false
    }
    onMounted(async () => {
      await getGoods(route.params.id)
    })
    onBeforeRouteUpdate((to, from, nex) => {
      getGoods(to.params.id)
      nex()
    })
    // 选规格触发的函数
    const cullSku = ref(null)
    const skuData = sku => {
      if (sku.skuId) {
        // 选完skuid后更新商品信息
        list.value.price = sku.price
        list.value.oldPrice = sku.oldPrice
        list.value.inventory = sku.inventory
        goodsNum.value = 1
        cullSku.value = sku
      } else {
        cullSku.value = null
      }
    }
    const goodsNum = ref(1) // 商品购买数量的默认值
    // 添加购物车
    // 1.约定存储购物车信息的字段（与后台协商，保持一致）
    // 2.定义vuex中的actions， mutations函数
    // 3.商品详情组件，加入购物车操作
    // 3.1：sku的一些信息，商品库存量，组织数据，调用actions即可
    // 购物车信息对象：商品id：id，商品名称：name，商品图片：picture，商品数量：count，库存：stock
    // 现价：nowPrice，商品规格信息：skuid，商品属性文字： attrsText，是否选中：selected，是否为有效商品：isEffective
    const clickCart = () => {
      if (!cullSku.value) return Message({ type: 'error', text: '请勾选商品规格信息！' })
      if (goodsNum.value > list.value.inventory) return Message({ text: '库存不足！' })
      store
        .dispatch('cart/insertCart', {
          id: list.value.id,
          name: list.value.name,
          count: goodsNum.value,
          skuId: cullSku.value.skuId,
          attrsText: cullSku.value.specsText,
          selected: true,
          nowPrice: cullSku.value.price,
          price: cullSku.value.price,
          stock: cullSku.value.inventory,
          isEffective: true,
          picture: list.value.mainPictures[0]
        })
        .then(res => {
          Message({ type: 'success', text: '加入购物车成功！' })
        })
        .catch(err => {
          console.log(err)
          Message({ type: 'error', text: '加入购物车失败！' })
        })
    }
    return { list, loading, skuData, goodsNum, clickCart }
  }
}
</script>

<style lang="less" scoped>
.loading {
  height: 600px;
  border-top: 72px solid #f5f5f5;
  background: #fff url(../../assets/images/images/loading.gif) no-repeat center / 80px 80px;
}
.goods-wrapper {
  display: flex;
  background: #fff;
  padding: 40px;
  .media {
    width: 480px;
    margin-right: 40px;
  }
}
</style>
